var GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
	doc = document,
	docElem = 'CSS1Compat' === doc.compatMode ? doc.documentElement : doc.body;

var getOffset = function (elem) {
    var x = 0, y = 0, rect;

    // 1. 对于 body 和 docElem, 直接返回 0, 绝大部分情况下，这都不会有问题
    // 2. 根据 GBS 最新数据，A-Grade Browsers 都已支持 getBoundingClientRect 方法，不用再考虑传统的实现方式
    if (doc.body != elem && docElem != elem && elem[GET_BOUNDING_CLIENT_RECT]) {
        rect = elem[GET_BOUNDING_CLIENT_RECT]();

        // 注：jQuery 还考虑减去 docElem.clientLeft/clientTop
        // 但测试发现，这样反而会导致当 html 和 body 有边距/边框样式时，获取的值不正确
        // 此外，ie6 会忽略 html 的 margin 值，幸运地是没有谁会去设置 html 的 margin

        x = rect.left + doc.body.scrollLeft;
        y = rect.top + doc.body.scrollTop;
    }

    return { left: x, top: y };
};

/*
 function setOffset(elem, offset) {
 var position = DOM.css(elem, POSITION);

 // set position first, in-case top/left are set even on static elem
 if (position === 'static') {
 position = elem.style[POSITION] = RELATIVE;
 }

 var old = getOffset(elem),
 relative = (position === RELATIVE),
 left = PARSEINT(DOM.css(elem, 'left'), 10),
 top = PARSEINT(DOM.css(elem, 'top'), 10);

 left = S.isNumber(left) ? left : (relative ? 0 : elem.offsetLeft);
 top = S.isNumber(top) ? top : (relative ? 0 : elem.offsetTop);

 DOM.css(elem, {left: (left + offset.left - old.left), top: (top + offset.top - old.top)});
 }
 */
(function() {
	var doc = document;

	function constrain(value, min, max) {
		return Math.min(Math.max(value, min), max);
	}

	function Zoom() {

	}

	Zoom.prototype = {
		_init: function() {
			var me = this;
		}
	}

	function mx(me) {
		var img = me.img,
			wrap,
			icon;
		wrap = me.imageWrap = $('<span></span>').insertBefore(img);
		wrap.prepend(img);
		icon = $('<span class="ks-imagezoom-icon"></span>');
		wrap.append(icon);

		lens(me);
	}

	function lens(me) {
		$('<span class="ks-imagezoom-lens"></span>').appendTo(me.imageWrap);
	}

	function x(me) {
		var img = me.img,
			imgOffset = getOffset(img),
			imgLeft,
			imgTop,
			imgWidth,
			imgHeight,
			bigImgWidth = 800,
			bigImgHeight = 800,
			scaleW,
			scaleH,
			lensWidth,
			lensHeight,
			width = me.width = 418,
			height = me.height = 418;

		imgLeft = me.imageLeft = imgOffset.left;
		imgTop = me.imageTop = imgOffset.top;
		imgWidth = me.imageWidth = img.width;
		imgHeight = me.imageHeight = img.height;

		// 缩放比例
		scaleW = me.scaleW = bigImgWidth / imgWidth;
		scaleH = me.scaleH = bigImgHeight / imgHeight;

		// 计算镜片大小: 视口 / 镜片 = 大图 / 小图
		lensWidth = me.lensWidth = width / scaleW;
		lensHeight = me.lensHeight = height / scaleH;

		me.minLensLeft = imgLeft;
		me.maxLensLeft = imgLeft + imgWidth - lensWidth;
		me.minLensTop = imgTop;
		me.maxLensTop = imgTop + imgHeight - lensHeight;
		me.minBigImageLeft = width - bigImgWidth;
		me.maxBigImageLeft = 0;
		me.minBigImageTop = height - bigImgHeight;
		me.maxBigImageTop = 0;
	}


var img = $('#intro > div.gallery > div > a > img')[0],//$('#preview > span > img')[0],
    imgOffset = getOffset(img),
    imgTop,
    imgLeft = 0,
    imgWidth,
    imgHeight,
    width = 418,
    height = 418,
    bigImageWidth = 800,
    bigImageHeight = 800,
    lensWidth,
    lensHeight,
    scaleW,
    scaleH;

imgTop = imgOffset.top;
imgLeft = imgOffset.left;

img.onload = function () {
    imgWidth = img.width;
    imgHeight = img.height;

//		width = imgWidth;
//		height = imgHeight;
	console.log(width, height);
    // 缩放比例
    scaleW = bigImageWidth / imgWidth;
    scaleH = bigImageHeight / imgHeight;
    // 计算镜片大小: 视口 / 镜片 = 大图 / 小图
    lensWidth = width / scaleW;
    lensHeight = height / scaleH;

    // 放大镜移动范围
    minLensTop = imgTop;
    maxLensTop = imgTop + imgHeight - lensHeight;
    minLensLeft = imgLeft;
    maxLensLeft = imgLeft + imgWidth - lensWidth;

    // 大图移动范围
		maxBigImageTop = 0;
		maxBLeft = 0;
    minBTop = -(bigImageHeight - height);
    minBLeft = -(bigImageWidth - width);

	mx({img: img});
	var zoomer;
	$(img).on('mouseenter', function() {
		if (!zoomer) {
		zoomer = $('<div id="ks-component1255" class="ks-overlay ks-imagezoom-viewer ks-overlay-hidden" style="width: 418px; height: 418px; left: 603px; top: 181px; visibility: hidden;">'
			+'<div id="ks-content-ks-component1255" class="ks-overlay-content">'
			+'<img src="http://gi3.md.alicdn.com/bao/uploaded/i7/TB1wGksGpXXXXXQXpXX1K9S8pXX_023438.jpg" style="position: absolute; top: 0px; left: -382px;">'
			+'</div></div>').appendTo(document.body);
		}
	});

    // console.log(lensWidth, lensHeight);
    // console.log(minBTop, minBLeft);
};
function onMouseMove(e) {
    var x = e.pageX,
        y = e.pageY,
	    l = imgLeft,
	    t = imgTop,
	    w = imgWidth,
	    h = imgHeight;
	// 在范围内
	if (x > l && x < l + w && y > t && y < t + h) {
		lensOffsetLeft = constrain(x - lensWidth / 2, minLensLeft, maxLensLeft);
		lensOffsetTop = constrain(y - lensHeight / 2, minLensTop, maxLensTop);
//		console.log(lensOffsetLeft, lensOffsetTop);
		$('.ks-imagezoom-lens').offset({
			left: lensOffsetLeft,
			top: lensOffsetTop
		}).width(lensWidth).height(lensHeight).css({visibility: 'visible'});

		bigImageOffsetLeft = constrain(-(x - l) * scaleW + width / 2, minBLeft, maxBLeft);
		bigImageOffsetTop = constrain(-(y - t) * scaleH + height / 2, minBTop, maxBigImageTop);
		$('#ks-component1255 img').css({
			left: bigImageOffsetLeft,
			top: bigImageOffsetTop
		});
	$('#ks-component1255').css({visibility: 'visible'});
	} else {
		$('.ks-imagezoom-lens').css({ visibility: 'hidden' });
		$('#ks-component1255').css({visibility:'hidden'});
	}
}
$(doc).on('mousemove mouseleave', onMouseMove);
var $gallery = $('.gallery a'),
	w = $gallery.width(),
	h = $gallery.height(),
	offset = $gallery.offset();
$('#ks-component1255').offset({
	left: offset.left + w + 20,
	top: offset.top
});
}).call(this);
